import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import './index.css'
class ToolCard extends Component {
  randomColor(color) {
    return 120 + parseInt(Math.random() * (color - 120))
  }
  cardLink = async () => {
    const {
      props,
      props: { history, toObj },
    } = this
    if (props.beforeClick) {
      await props.beforeClick()
    }
    if (toObj) {
      history.push(toObj)
    }
  }
  render() {
    const { cardData, dataName, dataColor, userDefinedColor } = this.props
    const rgbaBase = cardData[dataColor] % 6
    let r, g, b
    if (userDefinedColor) {
      r = userDefinedColor.r
      g = userDefinedColor.g
      b = userDefinedColor.b
    } else {
      r = (150 - rgbaBase * 10) % 255
      g = (150 + rgbaBase * 10) % 255
      b = 250
    }
    return (
      <div
        className="campus-card"
        style={{
          background: `linear-gradient(to top,
            rgb(${r}, ${g}, ${b}) 0%, 
            rgb(${r - 10}, ${g - 20}, ${b - 10}) 50%,
            rgb(${r}, ${g}, ${b}) 100%)`,
        }}
        onClick={this.cardLink}
      >
        <div className="campus-name">{cardData[dataName]}</div>
      </div>
    )
  }
}
export default withRouter(ToolCard)
